<template>
<el-card class="box-card" style="margin: 10px 0">
  <div class="clearfix">
    <!--  @tab-click="handleClick" -->
    <!-- 头部左侧 -->
    <el-tabs class="tab" v-model="activeName">
      <el-tab-pane label="销售额" name="sale"></el-tab-pane>
      <el-tab-pane label="访问量" name="visits"></el-tab-pane>
    </el-tabs>
    <!-- 头部右侧 -->
    <div class="right">
      <el-button size="mini" @click="getDay">今日</el-button>
      <el-button size="mini" @click="getWeek">本周</el-button>
      <el-button size="mini" @click="getMonth">本月</el-button>
      <el-button size="mini" @click="getYear">本年</el-button>

      <el-date-picker
        v-model="date"
        value-format="yyyy-MM-dd"
        class="date"
        size="mini"
        type="daterange"
        range-separator="-"
        start-placeholder="开始日期"
        end-placeholder="结束日期">
      </el-date-picker>
    </div>
  </div>
  <div>
    <el-row :gutter="10">
      <el-col :span="18">
        <!-- 容器 -->
        <div class="charts" ref="charts"></div>
      </el-col>
      <el-col :span="6">
        <h3>门店{{title}}排名</h3>
        <ul>
          <li>
            <span class="rindex top">0</span>
            <span>肯德基</span>
            <span class="rvalue">123</span>
          </li>
          <li>
            <span class="rindex top">1</span>
            <span>肯德基</span>
            <span class="rvalue">123</span>
          </li>
          <li>
            <span class="rindex top">2</span>
            <span>肯德基</span>
            <span class="rvalue">123</span>
          </li>
          <li>
            <span class="rindex">3</span>
            <span>肯德基</span>
            <span class="rvalue">123</span>
          </li>
          <li>
            <span class="rindex">4</span>
            <span>肯德基</span>
            <span class="rvalue">123</span>
          </li>
          <li>
            <span class="rindex">5</span>
            <span>肯德基</span>
            <span class="rvalue">123</span>
          </li>
          <li>
            <span class="rindex">6</span>
            <span>肯德基</span>
            <span class="rvalue">123</span>
          </li>
        </ul>
      </el-col>
    </el-row>
  </div>
</el-card>
</template>

<script>
import dayjs from 'dayjs'
import * as echarts from 'echarts'
import {mapState} from 'vuex'
export default {
  name: 'Sale' ,
   data () { 
      return {
        activeName: 'sale',
        myCharts: null,
        date: []
      }
    },
    mounted() {
      this.myCharts = echarts.init(this.$refs.charts)
      this.myCharts.setOption({
        title: {
          text: `${this.title}趋势`
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: [],
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis: [
          {
            axisLine: {
             show: true 
            }
          },
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: 'Direct',
            type: 'bar',
            barWidth: '60%',
            data: []
          }
        ]
      })
    },
    computed: {
      title () {
        return this.activeName=='sale'?'销售额':'访问量'
      },
      ...mapState({
        listState:state=>state.home.list
      })
    },
    watch: {
      title() {
        this.myCharts.setOption({
          title: {
            text: `${this.title}趋势`
          },
          xAxis: {
            data:this.title=='销售额'?this.listState.orderFullYearAxis:this.listState.userFullYearAxis
          },
          series:[
            {
            name: 'Direct',
            type: 'bar',
            barWidth: '60%',
            data: this.title == '销售额'?this.listState.orderFullYear:this.listState.userFullYear
          }
          ]
        })
      },
      listState() {
        this.myCharts.setOption({
          title: {
            text: `${this.title}趋势`
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: [
            {
              type: 'category',
              data: this.listState.orderFullYearAxis,
              axisTick: {
                alignWithLabel: true
              }
            }
          ],
          yAxis: [
            {
              axisLine: {
               show: true 
              }
            },
            {
              type: 'value',
            }
          ],
          series: [
            {
              name: 'Direct',
              type: 'bar',
              barWidth: '60%',
              data: this.listState.orderFullYear,
              color: 'yellowgreen'
            }
          ]
        })
      }
    },
    methods: {
      // 本日
      getDay() {
        const day = dayjs().format('YYYY-MM-DD')
        this.date = [day, day]
      },
      // 本周
      getWeek() {
        const start = dayjs().day(1).format('YYYY-MM-DD')
        const end = dayjs().day(7).format('YYYY-MM-DD')
        this.date = [start, end]
      },
      // 本月
      getMonth() {
        const start = dayjs().startOf('month').format('YYYY-MM-DD')
        const end = dayjs().endOf('month').format('YYYY-MM-DD')
        this.date = [start, end]
      },
      // 本年
      getYear() {
        const start = dayjs().startOf('year').format('YYYY-MM-DD')
        const end = dayjs().endOf('year').format('YYYY-MM-DD')
        this.date = [start, end]
      }
    }
}
</script>

<style scoped>
.clearfix {
  position: relative;
  display: flex;
  justify-content: space-between;
}
.tab {
  width: 100%;
}
.right {
  position: absolute;
  right: 0;
}
.right span {
  margin: 0 10px;
}
.date {
  width: 250px;
  margin-left: 30px;
}
.charts {
  width: 100%;
  height: 300px;
}
ul {
  list-style: none;
  width: 100%;
  height: 300px;
  padding: 0;
}
ul li {
  height: 8%;
  margin: 10px 0;
}
.rindex {
  float: left;
  width: 20px;
  height: 20px;
  text-align: center;
  padding-top: 2px;
  margin-right: 20px;
}
.top {
  background-color: black;
  border-radius: 50%;
  color: #fff;
}
.rvalue {
  float: right;
}
</style>
